<template>
    <div class="page-container">
        <div class="top-container">
            <el-button type="primary" @click="handleNewTask" class="custom-button">返回</el-button>
            <div class="right-section">
                <el-checkbox :model-value="isAllSelected" @change="handleSelectAll"
                    class="select-all-checkbox">全选</el-checkbox>
                <!-- <el-button type="success" @click="handlePublish" class="custom-button">发布</el-button>
                <el-button type="danger" @click="handleDelete" class="custom-button">删除</el-button>
                <el-button type="warning" @click="handleDownload" class="custom-button">下载</el-button> -->
            </div>
        </div>
        <div class="content-wrapper">
            <div class="content-list">
                <el-row :gutter="24">
                    <el-col v-for="item in pageData" :key="item.id" :xs="24" :sm="12" :md="8" :lg="6"
                        style="margin-bottom: 18px;">
                        <div class="card vertical-card">
                            <!-- 多选框 -->
                            <div class="card-checkbox">
                                <el-checkbox :model-value="props.selectVideoSonItem.some(selectedItem => selectedItem.id === item.id)"
                                    @change="() => handleSelectItem(item.id)" />
                            </div>
                            <!-- 顶部图片区域 -->
                            <!-- <div class="card-img-wrapper" @click="handleVideoClick(item)">
                                <template v-if="currentPlayingVideo === item.id">
                                    <video ref="videoPlayer" class="card-vertical-img" :src="item.video_url" controls
                                        preload="metadata">
                                        <source :src="item.video_url" type="video/mp4">
                                        您的浏览器不支持视频播放。
                                    </video>
                                </template>
<template v-else>
                                    <img :src="item.video_url_image || ''" class="card-vertical-img" />
                                </template>
</div> -->
                            <div class="card-img-wrapper" @click="handleVideoClick(item)">
                                <video ref="videoPlayer" class="card-vertical-img" :src="item.video_url" controls
                                    preload="metadata">
                                    <source :src="item.video_url" type="video/mp4">
                                    您的浏览器不支持视频播放。
                                </video>
                            </div>
                            <!-- 中部简介区域 -->
                            <el-tooltip :content="item.text" placement="top" effect="dark">
                                <div class="card-desc-wrapper">
                                    <span class="card-desc-text">{{ item.text }}</span>
                                </div>
                            </el-tooltip>
                            <!-- 底部时间区域 -->
                            <div class="card-bottom-bar">
                                <span class="card-time">{{ item.addtime }}</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="pagination-bar">
                <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
                    :page-size="pageSize" :current-page="currentPage" @size-change="handleSizeChange"
                    @current-change="handlePageChange" :page-sizes="[10,20,50,100]" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, defineProps, defineEmits, computed, watch } from 'vue'
import axiosUtil from '../../axios-util/axios-util'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import utils from '../../utils/utils';

//主题控制light  dark
const theme = utils.getTheme();

const props = defineProps<{
    videoId: number,
    type: string,
    selectVideoSonItem: any[]
}>()

const emit = defineEmits(['back', 'update:selectVideoSonItem'])

const searchText = ref('')
const currentPlayingVideo = ref<number | null>(null)

// 计算全选状态
const isAllSelected = computed(() => {
    return props.selectVideoSonItem.length === pageData.value.length && pageData.value.length > 0
})

const total = ref(0)
const pageSize = ref(10)
const currentPage = ref(1)
const pageData = ref([])
const loading = ref(false)

const fetchList = async () => {
    loading.value = true
    if (props.type == 'type1') {
        const response = await axiosUtil.post('api/storeintopieces/list', {
            id: props.videoId,
            limit: pageSize.value,
            offset: currentPage.value,
            status: '',
            title: searchText.value,
            type: 2,
        })
        if (response.data.code === 1 && response.data.data.rows) {
            pageData.value = response.data.data.rows
            total.value = response.data.data.total || 0
        }
    } else if (props.type == 'type2') {
        //TODO:
        const response = await axiosUtil.post('api/digitalpeople/list', {
            id: props.videoId,
            limit: pageSize.value,
            offset: currentPage.value,
            status: '',
            title: searchText.value,
            type: 2,
            protype: ''
        })
        if (response.data.code === 1 && response.data.data.rows) {
            pageData.value = response.data.data.rows
            total.value = response.data.data.total || 0
        }
    } else if (props.type == 'type3') {
        //TODO:
        const response = await axiosUtil.post('api/digitalpeople/list', {
            id: props.videoId,
            limit: pageSize.value,
            offset: currentPage.value,
            status: '',
            title: searchText.value,
            type: 2,
            protype: ''
        })
        if (response.data.code === 1 && response.data.data.rows) {
            pageData.value = response.data.data.rows
            total.value = response.data.data.total || 0
        }
    } else if (props.type == 'type4' || props.type == 'type5') {
        // 图生视频
        const response = await axiosUtil.post('api/aliyun_tongyi/wan_xiang/query_itov_item', {
            id: props.videoId,
            limit: pageSize.value,
            offset: currentPage.value,
        })
        if (response.data.code === 1 && response.data.data.rows) {
            pageData.value = response.data.data.rows.map(d => {
                d.video_url = d.url;
                return d;
            })
            total.value = response.data.data.total || 0
        }
    }
    loading.value = false
}

onMounted(() => {
    document.body.classList.remove('login-page')
    fetchList()
})

const handleNewTask = () => {
    // 清空选择状态
    emit('update:selectVideoSonItem', [])
    emit('back')
}

const handlePublish = () => {
    // 处理发布
}

const handleDelete = () => {
    // 处理删除
}

const handleDownload = () => {
    // 处理下载
}

const handleSizeChange = (size: number) => {
    pageSize.value = size
    currentPage.value = 1
    fetchList()
}
const handlePageChange = (page: number) => {
    currentPage.value = page
    fetchList()
}

// 搜索和筛选
const handleSearch = () => {
    currentPage.value = 1
    fetchList()
}
const handleTypeChange = () => {
    currentPage.value = 1
    fetchList()
}

const handleSelectAll = () => {
    const currentIsAllSelected = props.selectVideoSonItem.length === pageData.value.length && pageData.value.length > 0
    
    if (!currentIsAllSelected) {
        // 全选时，将所有项目添加到数组
        const newSelection = [...pageData.value]
        newSelection.forEach(item => {
            item.video_url_select = item.video_url
        })
        emit('update:selectVideoSonItem', newSelection)
    } else {
        // 取消全选时，清空数组
        emit('update:selectVideoSonItem', [])
    }
}

const handleSelectItem = (id: number) => {
    // 通过id找到选择的条目
    const selectedItem = pageData.value.find(item => item.id === id)
    
    if (selectedItem) {
        selectedItem.video_url_select = selectedItem.video_url
        const currentSelection = [...props.selectVideoSonItem]
        const existingIndex = currentSelection.findIndex(item => item.id === id)
        
        if (existingIndex === -1) {
            // 添加到选择数组
            currentSelection.push(selectedItem)
        } else {
            // 从选择数组中移除
            currentSelection.splice(existingIndex, 1)
        }
        
        // 更新父组件的选择状态
        emit('update:selectVideoSonItem', currentSelection)
    }
}

const handleVideoClick = (item: any) => {
    if (currentPlayingVideo.value === item.id) {
        currentPlayingVideo.value = null
    } else {
        currentPlayingVideo.value = item.id
    }
}
</script>

<style scoped>
.page-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.top-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
    backdrop-filter: blur(10px);
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
    border-radius: 8px;
    box-shadow: 0 4px 6px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.3)"');
    position: relative;
    overflow: hidden;
}

.top-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.5), transparent);
}

.right-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.video-type {
    width: 120px;
}

.search-input {
    width: 200px;
}

/* 自定义按钮样式 */
.custom-button {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"') !important;
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
}

.custom-button:hover {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.15)" : "rgba(0, 0, 0, 0.4)"') !important;
    border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"') !important;
}

/* 自定义下拉框样式 */
.custom-select :deep(.el-input__wrapper) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"') !important;
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
    box-shadow: none !important;
}

.custom-select :deep(.el-input__inner) {
    color: #fff !important;
}

.custom-select :deep(.el-input__wrapper:hover) {
    border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"') !important;
    box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
}

/* 自定义输入框样式 */
.custom-input :deep(.el-input__wrapper) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"') !important;
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
    box-shadow: none !important;
}

.custom-input :deep(.el-input__inner) {
    color: #fff !important;
}

.custom-input :deep(.el-input__wrapper:hover) {
    border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"') !important;
    box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
}

/* 下拉选项样式 */
:deep(.el-select-dropdown) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.95)" : "rgba(0, 20, 40, 0.95)"') !important;
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 255, 255, 0.3)"') !important;
    backdrop-filter: blur(10px);
}

:deep(.el-select-dropdown__item) {
    color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "rgba(255, 255, 255, 0.8)"') !important;
}

:deep(.el-select-dropdown__item.hover),
:deep(.el-select-dropdown__item:hover) {
    background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 255, 255, 0.15)"') !important;
    color: v-bind('theme === "light" ? "#000" : "#fff"') !important;
}

:deep(.el-select-dropdown__item.selected) {
    background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.2)" : "rgba(0, 255, 255, 0.2)"') !important;
    color: v-bind('theme === "light" ? "#000" : "#fff"') !important;
}

.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    min-height: 0;
    overflow: hidden;
}

.content-list {
    flex: 1;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
    border-radius: 12px;
    box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.2)"');
    padding: 24px;
    overflow-y: auto;
    margin-bottom: 16px;
}

/* 自定义滚动条样式 */
.content-list::-webkit-scrollbar {
    width: 6px;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 20, 40, 0.3)"');
}

.content-list::-webkit-scrollbar-thumb {
    background: v-bind('theme === "light" ? "linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2))" : "linear-gradient(180deg, rgba(0, 255, 255, 0.2), rgba(0, 255, 255, 0.4), rgba(0, 255, 255, 0.2))"');
    border-radius: 3px;
    border: 1px solid v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 255, 255, 0.3)"');
    box-shadow: 0 0 10px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.2)" : "rgba(0, 255, 255, 0.2)"');
}

.content-list::-webkit-scrollbar-thumb:hover {
    background: v-bind('theme === "light" ? "linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3))" : "linear-gradient(180deg, rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.5), rgba(0, 255, 255, 0.3))"');
    box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 255, 255, 0.3)"');
}

.content-list::-webkit-scrollbar-track {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 20, 40, 0.2)"');
    border-radius: 3px;
    border: 1px solid v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 255, 255, 0.1)"');
}

.vertical-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 320px;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
    border-radius: 10px;
    box-shadow: 0 0 10px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.2)"');
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
}

.vertical-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.15)" : "rgba(0, 255, 255, 0.15)"');
    border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 255, 255, 0.3)"');
}

.card-img-wrapper {
    flex: 0 0 75%;
    height: 75%;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
    cursor: pointer;
    position: relative;
}

.card-img-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid rgba(0, 255, 255, 0.08);
    background: transparent;
}

/* 自定义视频控制器样式 */
.card-img-wrapper :deep(video::-webkit-media-controls) {
    background: transparent;
}

.card-img-wrapper :deep(video::-webkit-media-controls-panel) {
    background: linear-gradient(transparent, rgba(0, 20, 40, 0.8));
}

.card-img-wrapper :deep(video::-webkit-media-controls-play-button) {
    background-color: rgba(0, 255, 255, 0.3);
    border-radius: 50%;
}

.card-img-wrapper :deep(video::-webkit-media-controls-volume-slider) {
    background-color: rgba(0, 255, 255, 0.3);
}

.card-img-wrapper :deep(video::-webkit-media-controls-timeline) {
    background-color: rgba(0, 255, 255, 0.3);
}

.card-img-wrapper :deep(video::-webkit-media-controls-current-time-display),
.card-img-wrapper :deep(video::-webkit-media-controls-time-remaining-display) {
    color: #fff;
}

.card-img-wrapper :deep(video::-webkit-media-controls-fullscreen-button) {
    background-color: rgba(0, 255, 255, 0.3);
    border-radius: 50%;
}

.card-vertical-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid rgba(0, 255, 255, 0.08);
}

.card-desc-wrapper {
    flex: 0 0 15%;
    height: 15%;
    padding: 8px 14px;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.2)"');
    color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
    font-size: 1em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
}

.card-desc-wrapper:hover .card-desc-text {
    /* 不做任何处理，去除动画 */
}

.card-desc-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.2s;
}

.card-bottom-bar {
    flex: 0 0 10%;
    height: 10%;
    padding: 0 14px 8px 14px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    font-size: 0.85em;
    color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#b2ebf2"');
}

.card-time {
    margin-left: auto;
    color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#b2ebf2"');
    font-size: 0.85em;
}

.pagination-bar {
    padding: 16px 0;
    display: flex;
    justify-content: flex-end;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
    border-radius: 12px;
    box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.2)"');
}

.select-all-checkbox {
    margin-right: 12px;
}

.select-all-checkbox :deep(.el-checkbox__label) {
    color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
}

.card-checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
}

.card-checkbox :deep(.el-checkbox__inner) {
    background-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 40, 80, 0.4)"');
    border-color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 255, 255, 0.3)"');
}

.card-checkbox :deep(.el-checkbox__inner:hover) {
    border-color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 255, 255, 0.5)"');
}

.card-checkbox :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 255, 255, 0.3)"');
    border-color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 255, 255, 0.5)"');
}

@media (max-width: 1200px) {
    .vertical-card {
        height: 280px;
    }
}

@media (max-width: 768px) {
    .vertical-card {
        height: 220px;
    }
}
</style>
